<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default() {
        return 'chart'
      }
    },
    tabName: {
      type: String,
      default() {
        return 'cruxAuditDataTotalVo'
      }
    },
    id: {
      type: String,
      default() {
        return 'chart'
      }
    },
    width: {
      type: String,
      default() {
        return '200px'
      }
    },
    height: {
      type: String,
      default() {
        return '200px'
      }
    },
    title: {
      type: String,
      default() {
        return '报警类型分布'
      }
    },
    titleLocation: {
      type: String,
      default() {
        return 'center'
      }
    },
    legend: {
      type: Object,
      default() {
        return {
          orient: 'horizontal',
          left: 'center', // 水平位置，可选值：'left', 'center', 'right'
          bottom: 20 // 垂直位置，可选值：'top', 'middle', 'bottom'
        }
      }
    },
    options: {
      type: Array,
       default() {
        return []
      }
    },
  },
  data() {
    return {
      chart: null,
      chartOption: null
    }
  },

  watch: {
    options: {
      deep: true,
      handler(newVal, oldVal) {
        this.chartOption.series[0].data = newVal
        this.chart.setOption(this.chartOption)
      }
    },
    tabName: {
      handler(newVal, oldVal) {
        this.chart.resize()
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.handleResize);
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const _this = this
      const option = {
        tooltip: {
           grid: {
            left: '2%',  // 左边距为5%的百分比
            right: '2%', // 右边距为5%的百分比
            containLabel: true // 容纳标签，避免标签被裁剪
           },
            trigger: 'item',
            backgroundColor: '#f2f2f2', // 背景颜色
            textStyle: {
              color: '#333', // 文本颜色
              align: 'left'
            },
            formatter: function (params) {
                const current = params.data
                let result = current.tooltips || `
                  ${current.name}报警占比：${current.alarmProportion}% <br/>
                  ${current.name}报警数：${current.value}
                `
                return result;
            }
        },
        title: {
            text: _this.title,
            left: _this.titleLocation,
            top: 20,
            textStyle:{
              fontSize: 12
            }
        },
        legend: _this.legend,
        series: [
            {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '车辆摆卖' },
                { value: 735, name: '非属地上牌' },
                { value: 580, name: 'bc分离' }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: false //隐藏标示文字
                    },
                    labelLine: {
                        show: false //隐藏标示线
                    }
                }
            }
          }
        ]
      }
      this.chartOption = option
      // this.chart.setOption(option)
    },
    handleResize() {
      this.chart.resize()
    }
  }
}
</script>
